<template>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Название</th>
                <th scope="col">Команды</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="tag in tags" :key="tag.tagId">
                <td scope="row">{{ tag.name }}</td>
                <td>
                    <BButtonGroup class="d-flex justify-content-end">
                        <BButton variant="outline-primary" @click="routeEditPage(tag.tagId)">
                            <i class="bi bi-pencil"></i>
                        </BButton>
                        <BButton variant="outline-danger" @click="deleteTag(tag.tagId)">
                            <i class="bi bi-trash"></i>
                        </BButton>
                    </BButtonGroup>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    props: {
        tags: {
            type: Array,
            required: true
        }
    },
    methods: {
        deleteTag(tagId) {
            const url = "/api/Tags/" + tagId;
            const requestOptions = {
                method: 'DELETE',
                headers: { 
                    'Content-Type': 'application/json', 
                    'Authorization': 'Bearer ' + this.$store.state.token,
                },
            };
            fetch(url, requestOptions)
                .then(response => {
                    if (response.status === 200) {
                        const index = this.tags.findIndex((item) => { return (item.tagId === tagId) });
                        if (index > -1) {
                            this.tags.splice(index, 1);
                        }
                    }
                    else {
                        console.log(`Ошибка удаления тэга (${tagId})`);
                    }
                })
        },
        routeEditPage(tagId) {
            this.$router.push("/Tags/Edit/" + tagId);
        }
    }
}
</script>

<style lang="scss" scoped></style>